<template>
  <div class="top7Body">
    <div
      style="
        display: flex;
        float: right;
        width: 30%;
        background-color: black;
        height: 475px;
        margin-top: 0px;
      "
    >
      <div style="background-color: white; height: 475px; width: 285px">
        <div style="background-color: white; height: 45px; width: 385px">
          <span style="font-size: x-large; display: flex; float: left">正在热映</span>
          <span
            style="
              font-size: large;
              display: flex;
              float: left;
              color: orange;
              margin-top: 10px;
              margin-left: 20px;
            "
            >TOP7</span
          >
        </div>
        <div style="background-color: white; height: 405px; width: 405px">
          <el-card class="box-card" style="background-color: white; width: 100%">
            <div v-for="(o, index) in 7" :key="o" class="text item">
              <div style="width: 100%; height: 50px; background-color: white">
                <div style="width: 25px; height: 12px; background-color: white"></div>
                <div
                  style="width: 25px; height: 25px; background-color: #42b983; text-align: center"
                >
                  <span style="color: white">
                    {{ index + 1 }}
                  </span>
                </div>
                <div
                  style="
                    margin-top: -25px;
                    margin-left: 35px;
                    background-color: white;
                    text-align: left;
                    width: 300px;
                  "
                >
                  <span style="margin-left: 5px"> {{ top_names[index] }} </span>
                  <span style="color: orange; margin-left: 10px"> {{ top_rates[index] }} 分</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div
      style="
        display: flex;
        float: right;
        width: 30%;
        background-color: white;
        height: 475px;
        margin-left: -100px;
        margin-top: 550px;
      "
    >
      <div class="demo-image">
        <el-image
          style="width: 365px; height: 355px; margin-top: 0px; margin-left: 0px"
          :src="imag1"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
const imag1 = require('../../assets/tj2.jpg');
const tableAll = ref();
const top_names = ref([]);
const top_rates = ref([]);
const top_cnt = ref(0);
onMounted(() => {
  axios.get('/api/movie/getMovieByMstate/正在热映').then(res => {
    tableAll.value = res.data;
    top_cnt.value = tableAll.value.length > 7 ? 7 : tableAll.value.length;
    for (let i = 0; i < top_cnt.value; i = i + 1) {
      top_names.value.push(tableAll.value[i].mname);
      top_rates.value.push(tableAll.value[i].rate);
    }
  });
});
</script>
<style lang="scss" scoped>
.top7Body {
  width: 30%;
  height: 850px;
  background-color: white;
  display: flex;
  float: right;
  margin-top: -1450px;
}
</style>
